<template>
  <div class="CustomeOrders">
    <div class="locationButton">
      <el-button type="primary" @click>帮助</el-button>
      <el-button type="primary" @click="$router.go(-1)">返回</el-button>
    </div>
    <el-form :inline="true" class="demo-form-inline">
      <div class="locationItem">
        <el-form-item label="客户编号">
          <el-input class="input-item" v-model="customer.code" disabled></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input class="input-item" v-model="customer.name" disabled></el-input>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="tableData.records" :highlight-current-row="true" style="max-height: 75%;width: 100%;">
      <el-table-column prop="id" :align="'center'" label="订单编号" width="120" />
      <el-table-column prop="orderTime" :align="'center'" label="日期" />
      <el-table-column prop="address" :align="'center'" label="送货地址" />
      <el-table-column prop="state" label="状态">
        <template scope="scope">
          <span v-if="scope.row.state==0">已回款</span>
          <span v-else>未回款</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" :align="'center'">
        <template slot-scope="scope">
          <i class="el-icon-s-grid" @click="orderDetails(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="current"
        :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CustomerContact",
    data() {
      return {
        modName: "历史订单",
        event: "",
        currentIndex: "",
        currentRow: "",
        customer: {},
        relationship: {},
        tableData: [],
        current: 1,
        pageSize: 5,
        dialogFormVisible: false
      };
    },
    methods: {
      getRouterData() {
        this.customer = JSON.parse(sessionStorage.getItem('customer'));
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getOrders();
      },
      handleCurrentChange(val) {
        this.current = val;
        this.getOrders();
      },
      orderDetails(row) {
        sessionStorage.setItem('order', JSON.stringify(row));
        this.$router.push({
          name: "orderDetails"
        });
      },
      cancel() {
        this.dialogFormVisible = false;
        this.relationship = {};
      },
      getOrders() {
        let _this = this;
        _this.$http
          .get("/customer/customerInfo/orders", {
            params: {
              pageIndex: _this.current,
              pageSize: _this.pageSize,
              customerId: _this.customer.id
            }
          })
          .then(function (ret) {
            _this.tableData = ret.data;
          });
      },
      sendeRequest(method, url, param) {
        //实现更新请求的代码复用
        let _this = this;
        param = method == "delete" ? { params: param } : param;
        this.$http[method](url, param).then(function (ret) {
          if (ret.data.code == 0) {
            _this.$notify({
              title: ret.data.msg,
              message: "😀",
              type: "success"
            });
          } else {
            _this.$notify.error({
              title: ret.data.msg,
              message: "😭",
              type: 'error'
            });
          }
        });
      }
    },
    created() {
      this.getRouterData(); //获取路由传递的参数
      this.getOrders(); //获取历史订单数据
    }
  };
</script>

<style scoped>
  .CustomerContact {
    padding: 30px 30px;
    margin: 30px auto;
  }

  .locationButton {
   float: right;
  }

  .locationItem {
    margin-top: 50px;
  }

  .el-form-item {
    margin-top: 0px;
  }

  .input-item {
    width: 305.4px;
  }

  .pager {
    text-align: center;
    margin-top: 10px;
  }

  .el-input,
  .el-select {
    width: 260px;
  }
</style>